<template>
    <div class="app-container">
        <h1 v-color="color">App 根组件</h1>
        <p v-color="'red'">测试</p>
        <button @click="color = 'green'">改变color的值</button>
        <hr/>
        <Article>
            <template #header>
                <p>一首诗</p>
            </template>
            <!--          <template #content="scope">-->
            <template #content="{ user }">  <!--解构赋值 -->
                <p>黑云</p>
                <p>盐城</p>
                <p>白猫</p>
                <!--              <p>打印作用域插槽里的数据：{{ scope }}</p>-->
                <p>打印作用域插槽里的数据：{{ user.username }}</p>
            </template>
            <template #footer>
                <p>作者：哈哈</p>
            </template>
        </Article>

        <div class="box">
            <!-- 渲染 Left 组件和 Right 组件 -->
            <!--        如果要把内容填充到指定名称的插槽中，则需要使用v-slot: 这个指令
                        v-slot后面要跟上插槽的名字
                        v-slot指令不能直接用在元素身上，必须用在template标签上
                        template这个标签，它是一个虚拟的标签，只起到包裹的作用，不会被渲染为任何实质性的html元素
                        v-slot: 指令的简写形式  #
            -->
            <Left style="display: none">
                <template #default>
                    <p>这是Left组件的内容区域，声明的p标签</p>
                </template>
            </Left>
        </div>
    </div>
</template>

<script>
import Left from "@/components/Left.vue";
import Article from "@/components/Article.vue";

export default {
    data() {
        return {
            color: 'blue'
        }
    },
    components: {
        Left,
        Article
    },
//     私有自定义指令的节点
    directives: {
        // 定义名为color的指令，指向一个配置对象
        // color: {
        //     // 当指令第一次被绑定到元素上的时候，会立即触发bind函数
        //     //     形参中的el表示当前指令所绑定到的那个dom函数
        //     bind(el,binding) {
        //         el.style.color = binding.value
        //     },
        //     // 在dom更新时，会调用update函数
        //     update(el,binding) {
        //         el.style.color = binding.value
        //     }
        // }
    //     简写形式
        color(el,binding) {
            el.style.color = binding.value
        }
    }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}

.box {
  display: flex;
}
</style>
